<template>
  <button :type="type" :class="classname" v-show="legal">
    <slot></slot>
  </button>
</template>
<script>
  
import classNames from '../classnames.js'; 
import store from 'lib/vuex/store.js'
import { hasToken } from 'lib/vuex/getters';
		
export default {
  props: {
    theme: {
      type: String,			
      default:"default"
    },
    size: {
      type: String,				
      default:"normal"
    },
    type: {
      type: String,				
      default:"button"
    },
		token: {
			type: String,
			default: "token"
		}
  },	
  computed: {
		legal() {
			let token = this.token;
			if(token == "token") {
				return false;
			} else {
				return hasToken(store.state,token)				
			}
		},
    classname() {
      let style = "btn-"+this.theme;
      let size = 'btn';      
      let sourceMap = {
          normal: '',        
          large: '-lg',
          small: '-sm',
          xsmall: '-xs',
          flat: '-flat'
      };
      
      if (sourceMap.hasOwnProperty(this.size)) {
          size = size+sourceMap[this.size];
      } 
      if(this.$el.hasAttribute("block")) {
        return classNames("btn",style,size,"btn-block"); 
      } else {
        return classNames("btn",style,size); 
      }           
    }
		
  }
}
</script>       

